Utilities

Helper classes to make your website more Beautiful

Borders

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt vero facere quo et nemo error repellendus esse expedita. A, doloribus.

Sizing

<div class="border border-width-1"></div>
<div class="border border-width-2"></div>
<div class="border border-width-3"></div>
<div class="border border-width-4"></div>
<div class="border border-width-5"></div>
<div class="border border-width-6"></div>

Colors

<div class="border border-f5"></div>
<div class="border border-color"></div>
<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-danger"></div>
<div class="border border-success"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>
<div class="border border-dark"></div>
<div class="border border-light"></div>
<div class="border border-facebook"></div>
<div class="border border-whatsapp"></div>

Sizing On Hover

<div class="border h-border-width-0"></div>
<div class="border h-border-width-1"></div>
<div class="border h-border-width-2"></div>
<div class="border h-border-width-3"></div>
<div class="border h-border-width-4"></div>
<div class="border h-border-width-5"></div>
<div class="border h-border-width-6"></div>
<div class="border border-width-3 h-border-width-6"></div>

Colors On Hover

<div class="border h-border-f5"></div>
<div class="border h-border-color"></div>
<div class="border h-border-primary"></div>
<div class="border h-border-secondary"></div>
<div class="border h-border-danger"></div>
<div class="border h-border-success"></div>
<div class="border h-border-warning"></div>
<div class="border h-border-info"></div>
<div class="border h-border-dark"></div>
<div class="border h-border-light"></div>
<div class="border h-border-facebook"></div>
<div class="border h-border-whatsapp"></div>
<div class="border border-danger h-border-whatsapp"></div>

Styles

<div class="border border-solid"></div>
<div class="border border-dotted"></div>
<div class="border border-dashed"></div>
<div class="border border-double"></div>

Opacity

Default classes

<div class="op-0"></div>
<div class="op-01"></div>
<div class="op-02"></div>
<div class="op-03"></div>
<div class="op-04"></div>
<div class="op-05"></div>
<div class="op-06"></div>
<div class="op-07"></div>
<div class="op-08"></div>
<div class="op-09"></div>
<div class="op-1"></div>

On Hover

<div class="h-op-0"></div>
<div class="h-op-01"></div>
<div class="h-op-02"></div>
<div class="h-op-03"></div>
<div class="h-op-04"></div>
<div class="h-op-05"></div>
<div class="h-op-06"></div>
<div class="h-op-07"></div>
<div class="h-op-08"></div>
<div class="h-op-09"></div>
<div class="h-op-1"></div>
<div class="op-05 h-op-1"></div>
<div class="h-op-01 op-ts"></div><!-- with transition .op-ts -->

Text

Text Sizes

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Lead/ Heading Subltitle

<p class="display-1"></p>
<p class="display-2"></p>
<p class="display-3"></p>
<p class="display-4"></p>
<p class="display-5"></p>
<p class="display-6"></p>
<p class="h1"></p>
<p class="h2"></p>
<p class="h3"></p>
<p class="h4"></p>
<p class="h5"></p>
<p class="h6"></p>
<p class="lead"></p>

Text Transform

Lowercased Text.

Uppercased text.

capiTaliZed text.

<div class="text-lowercase"></div>
<div class="text-uppercase"></div>
<div class="text-capitalize"></div>
Letter Spacing
Letter Spacing
Letter Spacing
Letter Spacing
Letter Spacing
Letter Spacing
<div class="ls-0"></div>
<div class="ls-1"></div>
<div class="ls-2"></div>
<div class="ls-3"></div>
<div class="ls-4"></div>
<div class="ls-5"></div>

Font Families

Font Body
Font Primary
Font Secondary
Font monospace
<div class="font-body"></div>
<div class="font-primary"></div>
<div class="font-secondary"></div>
<div class="font-monospace"></div>

Font Weights

Lighter weight text.

Light weight text.

Normal weight text.

Normal weight text.

Normal weight text.

Bold text.

Bolder weight text.

Italic text.

Text with normal font style.

<div class="fw-lighter"></div>
<div class="fw-light"></div>
<div class="fw-normal"></div>
<div class="fw-medium"></div>
<div class="fw-semibold"></div>
<div class="fw-bold"></div>
<div class="fw-bolder"></div>
<div class="fst-italic"></div>
<div class="fst-normal"></div>

Text Alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM or Text Center.

Start aligned text on viewports sized MD or Text Center.

Start aligned text on viewports sized LG or Text Center.

Start aligned text on viewports sized XL or Text Center.

<p class="text-start"></p>
<p class="text-center"></p>
<p class="text-end"></p>
<p class="text-center text-sm-start"></p>
<p class="text-center text-md-start"></p>
<p class="text-center text-lg-start"></p>
<p class="text-center text-xl-start"></p>

Text Decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed 
<p class="text-decoration-underline"></p>
<p class="text-decoration-line-through"></p>
<a href="#" class="text-decoration-none"></a>

Colors

On Text

theme-color
text-primary
text-secondary
text-success
text-info
text-danger
text-warning
text-light
text-dark
color-facebook
color-twitter
<div class="color""></div>
<div class="text-primary"></div>
<div class="text-secondary"></div>
<div class="text-success"></div>
<div class="text-info"></div>
<div class="text-danger"></div>
<div class="text-warning"></div>
<div class="text-light"></div>
<div class="text-dark"></div>
<div class="color-facebook"></div>
<div class="color-twitter"></div>

On Hover Color

theme-color
text-primary
text-secondary
text-success
text-info
text-danger
text-warning
text-light
text-dark
color-facebook
color-twitter
color-twitter
<div class="h-color""></div>
<div class="h-text-primary"></div>
<div class="h-text-secondary"></div>
<div class="h-text-success"></div>
<div class="h-text-info"></div>
<div class="h-text-danger"></div>
<div class="h-text-warning"></div>
<div class="h-text-light"></div>
<div class="h-text-dark"></div>
<div class="h-color-facebook"></div>
<div class="h-color-twitter"></div>

Icons

Icons - Hover

<i class="fa-brands fa-facebook-f color-facebook">
<i class="fa-brands fa-twitter color-twitter">
<i class="fa-brands fa-whatsapp color-whatsapp">
<!-- hover .h-* -->
<i class="fa-brands fa-facebook-f h-color-facebook">
<i class="fa-brands fa-twitter h-color-twitter">
<i class="fa-brands fa-whatsapp h-color-whatsapp">

gradient-green-dark

gradient-grey-brown

gradient-light-pink

gradient-blue-purple

gradient-multiples

gradient-blue-green

gradient-grey-orange

gradient-sunset

gradient-lemon

gradient-earth

gradient-horizon

gradient-horizon

<div class="gradient-text gradient-green-dark"></div>
<div class="gradient-text gradient-grey-brown"></div>
<div class="gradient-text gradient-light-pink"></div>
<div class="gradient-text gradient-blue-purple"></div>
<div class="gradient-text gradient-multiples"></div>
<div class="gradient-text gradient-blue-green"></div>
<div class="gradient-text gradient-grey-orange"></div>
<div class="gradient-text gradient-lemon"></div>
<div class="gradient-text gradient-earth"></div>
<div class="gradient-text gradient-horizon"></div>
<!-- with hover .h-* -->
<div class="gradient-text gradient-ocean h-gradient-purple-blue"></div>
Same Works on hover with .h-gradient-*

Gradients Text Underline

About The Conference

About The Conference

<div class="d-inline-block gradient-underline gradient-lemon"></div>
<div class="d-inline-block gradient-underline gradient-blue-green"></div>

Backgrounds

<div class="bg-color"></div>
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-info"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-light"></div>
<div class="bg-dark"></div>
<div class="bg-facebook"></div>
<div class="bg-x-twitter"></div>
<div class="bg-youtube"></div>
<div class="bg-whatsapp"></div>
<div class="bg-dribbble"></div>
<div class="bg-android"></div>

On Hover

<div class="bg-dark h-bg-color"></div>
<div class="bg-dark h-bg-primary"></div>
<div class="bg-dark h-bg-secondary"></div>
<div class="bg-dark h-bg-success"></div>
<div class="bg-dark h-bg-info"></div>
<div class="bg-dark h-bg-danger"></div>
<div class="bg-dark h-bg-warning"></div>
<div class="bg-dark h-bg-light"></div>
<div class="bg-light h-bg-dark"></div>
<div class="bg-dark h-bg-facebook"></div>
<div class="bg-dark h-bg-x-twitter"></div>
<div class="bg-dark h-bg-youtube"></div>
<div class="bg-dark h-bg-whatsapp"></div>
<div class="bg-dark h-bg-dribbble"></div>
<!-- with transition .bg-ts -->
<div class="bg-android h-bg-danger bg-ts"></div>

Bootstrap Background Light

<div class="bg-primary-light"></div>
<div class="bg-secondary-light"></div>
<div class="bg-success-light"></div>
<div class="bg-info-light"></div>
<div class="bg-danger-light"></div>
<div class="bg-warning-light"></div>
<div class="bg-dark-light"></div>

Gradients

<div class="gradient-light-grey"></div>
<div class="gradient-green-dark"></div>
<div class="gradient-grey-brown"></div>
<div class="gradient-light-pink"></div>
<div class="gradient-blue-purple"></div>
<div class="gradient-multiples"></div>
<div class="gradient-blue-green"></div>
<div class="gradient-light"></div>
<div class="gradient-grey-orange"></div>
<div class="gradient-sunset"></div>
<div class="gradient-dark"></div>
<div class="gradient-lemon"></div>
<div class="gradient-earth"></div>
<div class="gradient-horizon"></div>
<!-- with hover .h-* -->
<div class="gradient-ocean h-gradient-green-blue"></div>
Same Works on hover with .h-gradient-*

Image Effects

Image

Zoom Out on Hover

Image

Zoom In on Hover

Image

Destoy B/W on Hover

Image

B/W on Hover

Border Radius

Image
Image
Image
Image
Image
Image
Image 
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">
<img src="..." class="rounded-6" alt="...">

Rounded Variant

Image
Image
Image
Image
Image
Image
Image 
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

Shadow

<div class="shadow-sm"></div>
<div class="shadow"></div>
<div class="shadow-lg"></div>
<div class="shadow-none"></div>

On Hover

<div class="shadow-none h-shadow-sm"></div>
<div class="shadow-none h-shadow"></div>
<div class="shadow-none h-shadow-lg"></div>
<div class="shadow h-shadow-none"></div>

Transforms

Form Top And Bottom

<div class="h-translate-y-sm transform-ts"></div>
<div class="h-translate-y transform-ts"></div>
<div class="h-translate-y-lg transform-ts"></div>
<div class="h-translate-y-n-sm transform-ts"></div>
<div class="h-translate-y-n transform-ts"></div>
<div class="h-translate-y-n-lg transform-ts"></div>

Form Left And Right

<div class="h-translate-x-sm transform-ts"></div>
<div class="h-translate-x transform-ts"></div>
<div class="h-translate-x-lg transform-ts"></div>
<div class="h-translate-x-n-sm transform-ts"></div>
<div class="h-translate-x-n transform-ts"></div>
<div class="h-translate-x-n-lg transform-ts"></div>

Scale

<div class="h-scale-sm transform-ts"></div>
<div class="h-scale transform-ts"></div>
<div class="h-scale-lg transform-ts"></div>
<div class="h-scale-n-sm transform-ts"></div>
<div class="h-scale-n transform-ts"></div>
<div class="h-scale-n-lg transform-ts"></div>

Sizes

Square Box Sizes

<div class="square square-xs"></div>
<div class="square square-sm"></div>
<div class="square square-md"></div>
<div class="square square-lg"></div>
<div class="square square-xl"></div>
<div class="square" style="--cnvs-square-size: 10rem;"></div>
<div class="square" style="--cnvs-square-size: 9rem;"></div>

Max Widths

<div class="mw-xs mx-auto"></div>
<div class="mw-sm mx-auto"></div>
<div class="mw-md mx-auto"></div>
<div class="mw-lg mx-auto"></div>
<div class="mw-xl mx-auto"></div>
<div class="mw-xxl mx-auto"></div>
<div class="mw-custom mx-auto" style="--cnvs-mw-custom: 50%;"></div>

Gutters

<!-- Gutter classes can be added to .row DIV. In the following example, we use responsive gutter classes.
.gutter-10 is for 10px. EX: .gutter-10/20/30/40/50 or use style="--cnvs-custom-gutter: *px;" -->

<div class="row gutter-20 gutter-md-30 mb-5">
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
	<div class="col-3">
		<div class="w-100 bg-primary-light" style="height:4rem;"></div>
	</div>
</div>